<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户简称" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入客户简称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合作媒体" prop="signatory">
        <el-select v-model="queryParams.signatory" placeholder="请选择合作媒体" clearable>
          <el-option
            v-for="dict in dict.type.medium"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['baseMain:policy:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['baseMain:policy:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['baseMain:policy:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="policyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主合同" align="center" prop="mainParty" />

      <el-table-column label="客户简称" align="center" prop="nickName" />
      <el-table-column label="甲方主体" align="center" prop="aparty" />
      <el-table-column label="客户类别" align="center" prop="channel" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.channel" :value="scope.row.channel"/>
        </template>
      </el-table-column>
      <el-table-column label="合作方式" align="center" prop="cooperateType" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cooperate_type" :value="scope.row.cooperateType"/>
        </template>
      </el-table-column>
      <el-table-column label="付款方式" align="center" prop="payType" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pay_type" :value="scope.row.payType"/>
        </template>
      </el-table-column>

      <el-table-column label="乙方主体" align="center" prop="bparty" />
      <el-table-column label="合作媒体" align="center" prop="signatory">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.medium" :value="scope.row.signatory"/>
        </template>
      </el-table-column>
      <el-table-column label="政策类别" align="center" prop="policyType" />
      <el-table-column label="政策标签" align="center" prop="policyTag" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.policy_tag" :value="scope.row.policyTag"/>
        </template>
      </el-table-column>
      <el-table-column label="帐显返点%" align="center" prop="accountPoint" />
      <el-table-column label="私返返点%" align="center" prop="privatePoint" />
      <el-table-column label="总返点%" align="center" prop="totalPoint" />
<!--      <el-table-column label="媒介人员" align="center" prop="operateUserName" />-->
      <el-table-column label="状态" align="center" width="180"  prop="status" >
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status == '0'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
          <el-tag type="success" v-if="scope.row.status == '1'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
          <el-tag type="primary" v-if="scope.row.status == '2'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
          <el-tag type="danger" v-if="scope.row.status == '3'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
          <el-tag type="info" v-if="scope.row.status == '4'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
        </template>
      </el-table-column>
      <el-table-column label="生效时间" align="center" prop="takeTime" />
      <el-table-column label="业务部门" align="center" prop="businessUnitName" />
      <el-table-column label="销售" align="center" prop="operateUserName" />
      <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="selectHis(scope.row)"
            v-hasPermi="['baseMain:policy:edit']"
          >查看历史</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['baseMain:policy:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['baseMain:policy:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改客户政策对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="甲方主体"  prop="nickName">

              <el-select @change="changeAparty" v-model="form.aparty" style="width: 100%" filterable placeholder="请选择甲方主体" clearable>
                <el-option
                  v-if="item.aparty!=null && item.aparty!=''"
                  v-for="item in customList"
                  :key="item.id"
                  :label="item.aparty"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主合同" prop="mainParty">
              <el-input  v-model="form.mainParty" style="width: 100%" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
        <el-col :span="12">
          <el-form-item label="客户类别" prop="channel">
            <el-input  v-model="form.channel" style="width: 100%" disabled/>
          </el-form-item>
        </el-col>
          <el-col :span="12">
            <el-form-item label="合作方式" prop="cooperateType">
              <el-input  v-model="form.cooperateType" style="width: 100%" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="payType">
              <el-input  v-model="form.payType" style="width: 100%" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方主体" prop="bparty">
              <el-input  v-model="form.bparty" style="width: 100%" disabled/>
            </el-form-item>
          </el-col>
        </el-row>


      <el-row>
        <el-col :span="12">
          <el-form-item label="合作媒体" prop="signatory">
            <el-select v-model="form.signatory" @change="signatoryChange" style="width: 100%"  placeholder="请选择合作媒体">
              <el-option
                v-for="dict in dict.type.medium"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户简称" prop="nickName">
            <el-input  v-model="form.nickName" style="width: 100%" disabled/>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="政策类别" prop="policyType">
                <el-select  v-model="form.policyType" style="width: 100%"  placeholder="请选择政策类别">
                  <el-option
                    v-for="dict in policyTypeList"
                    :key="dict.policyType"
                    :label="dict.policyType"
                    :value="dict.policyType"
                  ></el-option>
                </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="政策标签" prop="policyTag">
              <el-select  v-model="form.policyTag" style="width: 100%"  placeholder="请选择政策标签">
                <el-option
                  v-for="dict in dict.type.policy_tag"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="帐显返点" prop="accountPoint">
              <el-input  @change="pointChange()" type="number" v-model="form.accountPoint" style="width: 100%"  placeholder="请输入帐显返点" >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="私返返点" prop="privatePoint">
              <el-input @change="pointChange()" type="number" v-model="form.privatePoint" style="width: 100%"  placeholder="请输入私返返点" >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>


        <el-row>

          <el-col :span="12">
            <el-form-item label="总返点" prop="totalPoint">
              <el-input v-model="form.totalPoint" type="number" style="width: 100%"  placeholder="请输入总返点" disabled >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>

          </el-col>

          <el-col :span="12">
            <el-form-item label="生效时间" prop="takeTime">
              <el-date-picker v-if="title=='添加客户政策'" style="width: 100%" clearable
                              v-model="form.takeTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择生效时间">
              </el-date-picker>
              <el-date-picker v-else style="width: 100%" clearable
                              v-model="form.takeTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择生效时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="媒介人员" prop="operateUser">-->
<!--              <el-select  @change="operateUserChange(form.operateUser)"  v-model="form.operateUser" style="width: 100%"  placeholder="请选择媒介人员">-->
<!--                <el-option-->
<!--                  v-for="operate in operateList"-->
<!--                  :key="operate.userId"-->
<!--                  :label="operate.nickName"-->
<!--                  :value="operate.userId"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

        </el-row>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

<!--    政策历史表-->
    <el-dialog title="政策修改历史" :visible.sync="openHis" width="1200px" append-to-body>
      <el-table v-loading="hisLoading" :data="policyHisList" >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="客户简称" align="center" prop="nickName" />
        <el-table-column label="主合同" align="center" prop="mainParty" />
        <el-table-column label="合作媒体" align="center" prop="signatory" />
        <el-table-column label="政策类别" align="center" prop="policyType" />
        <el-table-column label="政策标签" align="center" prop="policyTag" />
        <el-table-column label="帐显返点" align="center" prop="accountPoint" />
        <el-table-column label="私返返点" align="center" prop="privatePoint" />
        <el-table-column label="总返点" align="center" prop="totalPoint" />
        <el-table-column label="销售人员" align="center" prop="operateUserName" />
        <el-table-column label="审批人" align="center" prop="approveUserName" />
        <el-table-column label="审批状态" align="center" prop="status" >
          <template slot-scope="scope">

            <el-tag type="info" v-if="scope.row.status == '0'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
            <el-tag type="success" v-if="scope.row.status == '1'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
            <el-tag type="primary" v-if="scope.row.status == '2'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
            <el-tag type="danger" v-if="scope.row.status == '3'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
            <el-tag type="info" v-if="scope.row.status == '4'">  <dict-tag :options="dict.type.policy_status" :value="scope.row.status"/></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column width="180" label="提交时间" align="center" prop="createTime" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listPolicy, getPolicy, delPolicy, addPolicy, updatePolicy } from "@/api/baseMain/policy";
import { getCustomList, getCustomNames } from '@/api/baseMain/custom'
import { selectUserIdsByDeptId } from "@/api/system/user";
import { listPolicyHisNoPages} from "@/api/baseMain/policyHis";
import { listPolicyType} from "@/api/baseMain/policyType";

export default {
  name: "Policy",
  dicts: ['medium','policy_status','policy_tag','cooperate_type','channel','cooperate_type','pay_type'],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      hisLoading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户政策表格数据
      policyList: [],
      policyHisList: [],
      customList: [],
      operateList: [],
      policyTypeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openHis: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: undefined,
        signatory: undefined,
        policyType: undefined,
        policyTag: undefined,
        accountPoint: undefined,
        privatePoint: undefined,
        totalPoint: undefined,
        operateUser: undefined,
        operateUserName: undefined
      },
      // 表单参数
      form: {},
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      pickerOptions2:{
        disabledDate(time) {
          return time.getTime() >= Date.now() - 8.64e7;
        }
      },
      // 表单校验
      rules: {
        id: [
          { required: true, message: "主键不能为空", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "客户简称不能为空", trigger: "blur" }
        ],
        signatory: [
          { required: true, message: "合作媒体不能为空", trigger: "change" }
        ],
        accountPoint: [
          { required: true, message: "帐显返点不能为空", trigger: "blur" }
        ],
        privatePoint: [
          { required: true, message: "私返返点不能为空", trigger: "blur" }
        ],
        totalPoint: [
          { required: true, message: "总返点不能为空", trigger: "blur" }
        ],
        operateUser: [
          { required: true, message: "运营人员id不能为空", trigger: "blur" }
        ],
        policyType: [
          { required: true, message: "政策类别不能为空", trigger: "blur" }
        ],
        policyTag: [
          { required: true, message: "政策标签不能为空", trigger: "blur" }
        ],
        takeTime: [
          { required: true, message: "生效时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();

  },
  methods: {
    changeAparty(e){

      this.form.aparty = e.aparty
      this.form.mainParty = e.mainParty
      this.form.customId = e.id
      this.form.nickName = e.nickName
      this.form.channel = e.channel
      this.form.cooperateType = e.cooperateType
      this.form.payType = e.payType
      this.form.bparty = e.bparty
      console.log(this.form)
    },
    signatoryChange(e){
      console.log(e)
      listPolicyType({signatory:e}).then(response => {
        this.policyTypeList = response.rows;
      })
    },
    selectHis(row){
      this.hisLoading = true;
      listPolicyHisNoPages({policyId:row.id}).then(res=>{
        this.policyHisList = res
        this.openHis = true;
        this.hisLoading = false;
      })
    },
    pointChange(){
        if(this.form.accountPoint != undefined && this.form.privatePoint != undefined){
          this.form.totalPoint = Number(this.form.accountPoint) + Number(this.form.privatePoint)
        }
    },
    operateUserChange(e){
      for (let index in this.operateList){
        if(this.operateList[index].userId == e){
          this.form.operateUserName = this.operateList[index].nickName
        }
      }
    },
    getCustomNames(){
      getCustomList({}).then(res => {
        this.customList = res
      })

      let operate = {
        roleId : '1741717746987237377'
      }
      // 查询运营人员
      selectUserIdsByDeptId(operate).then(response =>{
        this.operateList = response.data
      })
    },
    /** 查询客户政策列表 */
    getList() {
      this.loading = true;
      listPolicy(this.queryParams).then(response => {
        this.policyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        nickName: undefined,
        signatory: undefined,
        policyType: undefined,
        policyTag: undefined,
        remark: undefined,
        createTime: undefined,
        costomId: undefined,
        createBy: undefined,
        updateTime: undefined,
        updateBy: undefined,
        accountPoint: undefined,
        privatePoint: undefined,
        totalPoint: undefined,
        operateUser: undefined,
        operateUserName: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加客户政策";
      this.getCustomNames()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      if(row.status == '2'){
        this.$modal.msgWarning("数据审批中，请勿修改！");
        return;
      }
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getPolicy(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改客户政策";
        this.getCustomNames()
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updatePolicy(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addPolicy(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除客户政策编号为"' + ids + '"的数据项？').then(() => {
        this.loading = true;
        return delPolicy(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('baseMain/policy/export', {
        ...this.queryParams
      }, `policy_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
